<template>
  <!-- 角色管理 -->
  <div class="box">
    <avue-crud :ref="refName"
               :option="option"
               :page="page"
               :table-loading="tableLoading"
               @row-update="handleUpdate"
               @row-save="handleSave"
               @row-del="rowDel"
               @size-change="sizeChange"
               @current-change="currentChange"
               @refresh-change="refreshChange"
               @search-reset="searchChange"
               @search-change="searchChange"
               v-model="form"
               :data="tableData">
      <template #menu="{ size, row, index }">
        <el-button v-if="buttonPermissionsCheck('SYS_SET_MENU')"
                   :size="size"
                   @click="openMenu(row)"
                   type="text">设置菜单
        </el-button>
      </template>
    </avue-crud>


    <el-dialog
        v-model="dialogVisible"
        title="分配菜单权限"
        width="20%"
        :close-on-click-modal="false"
        :append-to-body="true">
      <div class="dialog-body">
        <el-tree
            ref="treeRef"
            :data="menuList"
            :props="defaultProps"
            node-key="id"
            highlight-current
            show-checkbox
            default-expand-all
            class="filter-tree">
        </el-tree>
      </div>
      <template #footer>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="setMenuByRole">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>

import {option} from '@/table/sys/role/list.js'

const httpService = inject('httpService')
const {
  form,
  page,
  refName,
  tableData,
  tableLoading,
  handleSave,
  handleUpdate,
  rowDel,
  searchChange,
  refreshChange,
  sizeChange,
  currentChange,
  activated,
  buttonPermissionsCheck,
} = useTableMixins(option, "sys-role", {})

//定义当前选中的角色
const obj = ref({});

//定义菜单树
const menuList = ref([]);

//定义菜单弹框
const dialogVisible = ref(false)

//定义树ref
const treeRef = ref(null);

//菜单树配置
const defaultProps = ref({
  children: 'children',
  label: 'name'
})


//打开菜单设置框
const openMenu = (row) => {
  obj.value = row;
  dialogVisible.value = true;
  //查询出当前角色菜单
  httpService.get("/sys-menu/findMenuRole/" + obj.value.id).then(res => {
    //设置选中
    let menuIds = res.map(x => {
      return x.menuId;
    });
    treeRef.value.setCheckedKeys(menuIds, false)
  })
}

/**
 * 设置角色菜单权限
 */
const setMenuByRole=()=>{
  let menuList = treeRef.value.getCheckedKeys(false)
  httpService.post("/sys-role/setMenuByRole", {
    id: obj.value.id,
    menus: menuList.map(x=>{
      return {id:x}
    }),
  }).then(res => {
    ElMessage.success("保存成功");
    dialogVisible.value = false;
  })

}


/**
 * 数据初始化
 */
(() => {
  httpService.get("/sys-menu/findMenuTree").then(res => {
    menuList.value = res;
  });
})();


onActivated(() => {
  activated()
})
</script>

<style scoped>
.dialog-body {
  height: 500px;
  flex: 1;
  overflow: auto;
}
</style>
